/**
 * 统一的栅格背景样式
 * 用于所有渲染器组件的栅格背景显示
 */

/* CSS 变量定义 */
:root {
  /* 浅色主题栅格样式 */
  --grid-line-color: rgba(0, 0, 0, 0.1);
  --grid-line-width: 1px;
  --grid-size: 20px;
  --grid-bg-color: #f8f9fa;
  
  /* 深色主题栅格样式 */
  --grid-line-color-dark: rgba(255, 255, 255, 0.15);
  --grid-bg-color-dark: #1a1a1a;
}

/* 栅格背景基础类 */
.grid-background-base {
  /* 移除背景色以提高透明度 */
  /* background-color: var(--grid-bg-color); */
  transition: background-color 0.3s ease;
}

/* 显示栅格的类 */
.show-grid {
  background-image: 
    linear-gradient(to right, var(--grid-line-color) var(--grid-line-width), transparent var(--grid-line-width)),
    linear-gradient(to bottom, var(--grid-line-color) var(--grid-line-width), transparent var(--grid-line-width));
  background-size: var(--grid-size) var(--grid-size);
  background-position: -1px -1px;
}

/* 深色主题适配 */
[data-theme="dark"] .grid-background-base,
.dark-theme .grid-background-base {
  /* 移除深色主题背景色以提高透明度 */
  /* background-color: var(--grid-bg-color-dark); */
}

[data-theme="dark"] .show-grid,
.dark-theme.show-grid {
  background-image: 
    linear-gradient(to right, var(--grid-line-color-dark) var(--grid-line-width), transparent var(--grid-line-width)),
    linear-gradient(to bottom, var(--grid-line-color-dark) var(--grid-line-width), transparent var(--grid-line-width));
}

/* 预览模式和只读模式下隐藏栅格 */
.preview-mode .show-grid,
.readonly .show-grid {
  background-image: none !important;
}

/* 隐藏栅格的类 */
.hide-grid {
  background-image: none !important;
}

/* 不同栅格大小的变体 */
.grid-size-small {
  --grid-size: 10px;
}

.grid-size-medium {
  --grid-size: 20px;
}

.grid-size-large {
  --grid-size: 40px;
}

/* 栅格透明度变体 */
.grid-subtle {
  --grid-line-color: rgba(0, 0, 0, 0.05);
  --grid-line-color-dark: rgba(255, 255, 255, 0.08);
}

.grid-prominent {
  --grid-line-color: rgba(0, 0, 0, 0.2);
  --grid-line-color-dark: rgba(255, 255, 255, 0.25);
}